<script lang="ts" setup>
import { ref, onMounted, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import gdglService from '@/api/gdgl'
import formBox from '@/components/queryTable/form/index.vue'
import tableBox from '@/components/queryTable/table/index.vue'
import { formItems } from '../form-item'
import { TgshListQueryResult } from '@/api/gdgl-dto'
import router from '@/router/index'
import shthDialog from '../dialogs/shth-dialog.vue'
import tgspbDialog from '@/views/gdgl/ajgd/dialogs/tgspb-dialog.vue'
import lcgzDialog from '@/views/gdgl/ajgd/dialogs/lcgz-dialog.vue'
import ajxqDialog from '../dialogs/ajxq-dialog.vue'
import { TableItem } from '@/api/common'
// 入参

// gd0500001	待审批	gd050	退改审核结果
// gd0500002	已审批	gd050	退改审核结果

const props = defineProps({
  activeName: {
    type: String,
    required: true,
  },
})
const loading = ref<boolean>(false)

/**
 * 数据源
 */

const optionsObjs = ref<any>({})
// 更多条件查询
const formLabel = ref()
onMounted(async () => {
  loading.value = true
  formLabel.value = await formItems('tgsh')
  loading.value = false
  form.value.filter.shjgdm = props.activeName === 'dsp' ? 'gd0500001' : 'gd0500002'
  changePageNum(1)
})

const total = ref<number>(0)
const page = computed(() => {
  return {
    pageNum: form.value.pageNum,
    pageSize: form.value.pageSize,
    total: total.value,
  }
})
/*
 * 分页
 */
const changePageNum = (val: number) => {
  form.value.pageNum = val
  getTableData()
}

/*
 * 分页
 */
const changePageSize = (val: number) => {
  form.value.pageNum = 1
  form.value.pageSize = val
  getTableData()
}

/*
 * 查询按钮
 */
const searchTable = (data: any) => {
  let newObj: any = {}
  for (const key in data) {
    if (key.endsWith('-rq')) {
      const kssj = key.replace('-rq', 'ksrq')
      const jssj = key.replace('-rq', 'jsrq')
      if (data[key]?.length) {
        newObj[kssj] = data[key][0]
        newObj[jssj] = data[key][1]
      } else {
        newObj[kssj] = ''
        newObj[jssj] = ''
      }
    }
    newObj[key] = data[key]
  }
  form.value.filter = newObj
  getTableData()
}

// 查询条件
const form = ref({
  pageSize: 20,
  pageNum: 1,
  filter: {
    bmsah: '',
    ajmc: '',
    tysah: '',
    tgsqr: '',
    tgsqksrq: '',
    tgsqjsrq: '',
    shjgdm: 'gd0500001',
  },
})
/*
 * 获取表格数据
 */
const tableBoxRef = ref<InstanceType<typeof tableBox>>()
// 表格数据
const tableData = ref<TableItem>({
  data: [],
  titles: [
    {
      label: '案件名称',
      prop: 'ajmc',
      width: 200,
      custom: true,
      sort: true,
      dqfs: 'left',
    },
    { label: '部门受案号', prop: 'bmsah', width: 280, dqfs: 'left' },
    { label: '统一受案号', prop: 'tysah', width: 200, dqfs: 'left' },
    { label: '申请人', prop: 'tgsqrxm', width: 120, dqfs: 'left' },
    { label: '申请日期', prop: 'tgsqrq', width: 120, dqfs: 'left' },
    { label: '退改类型', prop: 'tglxmc', width: 120, dqfs: 'left' },
    { label: '退改理由', prop: 'tgyy', width: 120, dqfs: 'left' },
    { label: '检察官审批', prop: 'jcgsh', width: 150, dqfs: 'left' },
    { label: '部门审批', prop: 'bmsh', width: 120, dqfs: 'left' },
    { label: '院领导审批', prop: 'yldsh', width: 150, dqfs: 'left' },
    { label: '档案审批', prop: 'daysh', width: 120, dqfs: 'left' },
    { label: '退改状态', prop: 'tgzt', width: 120, dqfs: 'left' },
  ],
})
const getTableData = () => {
  const params = form.value
  loading.value = true
  gdglService
    .queryTgshList(params)
    .then((res) => {
      if (res) {
        tableData.value.data = res.data.list
        total.value = res.data.total
      }
    })
    .catch((err) => {
      !err.isError && ElMessage({ type: 'warning', message: err.message })
    })
    .finally(() => {
      loading.value = false
    })
}

/**
 * 表格选择
 */
const multipleSelection = ref<TgshListQueryResult[]>([])
const selectionChange = (val: TgshListQueryResult[]) => {
  multipleSelection.value = val
}

/*
 * 点击案件名称进入归档
 */
const checkRow = (row: any) => {
  router.push({
    path: '/jcgshxq',
    query: {
      ...row,
      route: '/tgsh',
      jumpFrom: props.activeName,
    },
  })
}

const sptg = () => {
  ElMessageBox.confirm('是否审核通过？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    const params = {
      dqtgjddm: multipleSelection.value[0]?.tgjddm,
      gdxxList: multipleSelection.value.map((el) => {
        return {
          ajbh: el.ajbh,
          bmsah: el.bmsah,
          tgjlbh: el.tgjlbh,
        }
      }),
      shjg: '1',
      shthyy: '',
      shthyydm: '',
      shthyymc: '',
      xyjdclrbh: '',
      xyjdclrxm: '',
      sftjsh: 'N',
    }
    loading.value = true
    gdglService
      .saveTgshjl(params)
      .then(() => {
        ElMessage.success('审批成功')
        getTableData()
      })
      .catch((err) => {
        !err.isError && ElMessage({ type: 'warning', message: err.message })
      })
      .finally(() => {
        loading.value = false
      })
  })
}

/*
 * 打开审核退回弹框
 */
const shthDialogRef = ref<InstanceType<typeof shthDialog>>()
const openShthDialog = () => {
  shthDialogRef.value!.openDialog(multipleSelection.value)
}

/*
 * 打开文书弹框
 */
const wsDialogRef = ref<InstanceType<typeof tgspbDialog>>()
const openWsDialog = (val: TgshListQueryResult) => {
  wsDialogRef.value?.openDialog(val)
}

/**
 * 打开详情弹框
 */
const ajxqDialogRef = ref<InstanceType<typeof ajxqDialog>>()
const openXqDialog = (row: TgshListQueryResult) => {
  ajxqDialogRef.value!.openDialog(row)
}

/**
 * 不可以退回
 */
const canNotTh = computed(() => {
  const arr = ['gd0160001', 'gd0160002', 'gd0160003', 'gd0160004']
  return multipleSelection.value.findIndex((el) => !arr.includes(el.tgjddm)) >= 0
})

const rowClick = (row: any) => {
  if (multipleSelection.value?.includes(row)) {
    tableBoxRef.value?.refTable.toggleRowSelection(row, false)
  } else {
    tableBoxRef.value?.refTable.toggleRowSelection(row, true)
  }
}

/*
 * 打开流程跟踪弹窗
 */
const lcgzRef = ref()
const viewLcgz = (row: any) => {
  lcgzRef.value?.openDialog(row)
}
</script>
<template>
  <div class="container" v-loading="loading">
    <div class="content-box">
      <!--表单-->
      <div class="form-box">
        <form-box
          ref="formBoxRef"
          :formLabel="formLabel"
          :formData="form.filter"
          :moreShow="false"
          :optionsObj="optionsObjs"
          @searchEvent="searchTable"
        />
      </div>
      <!--按钮组-->
      <div class="btn-box">
        <div class="table-title">
          <span>退改审批</span>
        </div>
        <button
          v-if="activeName === 'dsp'"
          class="btn_operation"
          @click="sptg"
          :disabled="multipleSelection.length !== 1"
        >
          <div class="btn-shtg"></div>
          审批通过
        </button>
        <button
          v-if="activeName === 'dsp'"
          class="btn_operation"
          @click="openShthDialog"
          :disabled="canNotTh || !multipleSelection.length"
        >
          <div class="btn-shth"></div>
          审批退回
        </button>
        <button class="btn_operation" @click="changePageNum(1)">
          <div class="btn-refresh"></div>
          刷新
        </button>
      </div>
      <!--表格-->
      <div class="table-box">
        <table-box
          gnbm="tgsp"
          ref="tableBoxRef"
          :table-data="tableData"
          :selectShow="true"
          :getTableDataParam="page"
          :tableInfo="{ total: page.total }"
          @changeCurrent="changePageNum"
          @changeSize="changePageSize"
          @selectionChange="selectionChange"
          @checkRow="checkRow"
          @rowClick="rowClick"
        >
          <template #myAction>
            <el-table-column label="操作" width="100" fixed="right">
              <template #default="scope">
                <div class="active-img" title="流程跟踪" @click="viewLcgz(scope.row)">
                  <img src="@/assets/images/gdgztext.png" />
                </div>
                <div class="active-img" title="退改审批表" @click="openWsDialog(scope.row)">
                  <img src="@/assets/images/tgspb.png" />
                </div>
                <div class="active-img" title="详情" @click="openXqDialog(scope.row)">
                  <img src="@/assets/images/details.png" />
                </div>
              </template>
            </el-table-column>
          </template>
        </table-box>
      </div>
    </div>
    <!--审核退回-->
    <shth-dialog ref="shthDialogRef" @refresh="getTableData" />
    <!--退改审批表-->
    <tgspb-dialog ref="wsDialogRef" />
    <!--案卷详情-->
    <ajxq-dialog ref="ajxqDialogRef" />
    <!-- 流程跟踪 -->
    <lcgzDialog ref="lcgzRef" />
  </div>
</template>
<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  background: #fff;
  .content-box {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  .form-box {
    width: 100%;
  }
  .btn-box {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 10px;
  }
  .table-box {
    flex: 1;
    flex-shrink: 0;
    overflow: hidden;
    > .container {
      display: flex;
      flex-direction: column;
    }
  }
  .active-img {
    cursor: pointer;
    float: left;
  }
  .active-img + .active-img {
    margin-left: 10px;
  }
}
</style>
